<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图 - 基本地图展示</title>
    <link rel="stylesheet" href="/assets/map/mapcss/main1119.css"/>
    <link rel="stylesheet" href="/assets/map/css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/map/css/marquee.css">

    <link rel="stylesheet" href="/assets/map/mapcss/initmap.css">
    <link rel="stylesheet" href="/assets/map/mapcss/addOverlay.css">
    <link rel="stylesheet" href="/assets/map/mapcss/searchtip.css">
    <link rel="stylesheet" href="/assets/map/mapcss/infowindow.css">
    <link rel="stylesheet" href="/assets/map/mapcss/managewindow.css">
    <link rel="stylesheet" href="/assets/map/mapcss/mapEcharts.css">
    <link rel="stylesheet" type="text/css" href="/assets/map/css/fontawesome/css/font-awesome.min.css">	<!-- 一款强大的字体图标 -->
</head>
<body>
<div id="container">
    <div id="infoBar" class="infoBar">
        <div class="marquee-sibling"> Alarm News </div>
        <div class="marquee">
            <ul id="marquee-content-items" class="marquee-content-items">
            </ul>
        </div>
    </div>

    <div class="mysearch-bar">
        <div class="input-group mysearch-bar-group">
            <input type="text" id="keyword" class="form-control" placeholder="请输入设备名称或搜索地址" onfocus='this.value=""'>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="searchAddress()">搜索</button>
            </span>
        </div>
    </div>

    <div class="mymng-window">
        <div class="mymng-title">
            <button type="button" class="btn btn-primary mymng-title-btn" togstate="0" onclick="initMngWindow(this)" data-toggle="collapse" data-target="#mymng-content">
                <span class='mymng-unit' id="mymng-unit">保护单位名称</span>
                <small class='mymng-unitname'></small>
                <span class="caret mymng-caret"></span>
            </button>
        </div>
        <div id="mymng-content" class="collapse">
            <ul id="mymng-tab" class="nav nav-tabs nav-justified">
                <li class="active"><a href="#mymng-alldevice" data-toggle="tab">设备列表</a></li>
                <li><a href="#mymng-seldevice" data-toggle="tab">筛选设备</a></li>
                <li><a href="#mymng-history" data-toggle="tab">报警列表</a></li>
            </ul>
            <div id="mymng-tabcontent" class="tab-content">
                <!-- 所有设备 -->
                <div class="tab-pane fade in active" id="mymng-alldevice">
                    <div class="myalldevice-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入设备Id或设备名称">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">搜索</button>
                            </span>
                        </div>
                    </div>
                    <div id="myalldevice-ul" class="mytab-ul"></div>
                </div>
                <!-- 筛选设备 -->
                <div class="tab-pane fade" id="mymng-seldevice">
                    <ul id="myseldevice-ul" class="mytab-ul">
                        <li>
                            <div class="mysel-checkbox">
                                <div><input type="checkbox" id="detector" checked="checked"/>终端</div>
                                <div><input type="checkbox" id="repeater" checked="checked"/>中继</div>
                            </div>
                        </li>
                        <li>
                            <div class="input-group">
                                <span class="input-group-addon">工作状态</span>
                                <select class="form-control" id="mysel-workstate">
                                    <option value="9">选择所有</option>
                                    <option value="0">工作正常</option>
                                    <option value="1">工作异常</option>
                                    <option value="2">工作故障</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div class="input-group">
                                <span class="input-group-addon">报警状态</span>
                                <select class="form-control" id="mysel-alarmstate">
                                    <option value="9">选择所有</option>
                                    <option value="0">未报警</option>
                                    <option value="1">报警未处理</option>
                                    <option value="2">报警已处理</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div class="input-group">
                                <span class="input-group-addon">更新状态</span>
                                <select class="form-control" id="mysel-updatestate">
                                    <option value="9">选择所有</option>
                                    <option value="0">未更新</option>
                                    <option value="1">更新中</option>
                                    <option value="2">已更新</option>
                                </select>
                            </div>
                        </li>
                    </ul>
                    <button type="button" class="btn btn-primary mysel-button" onclick="selectDevice()">确认选择</button>
                </div>
                <!-- 报警列表 -->
                <div class="tab-pane fade" id="mymng-history">
                    <ul id="myalarmhis-ul" class="mytab-ul"></ul>
                </div>
            </div>

        </div>
    </div>

    <div id="tip">
        <div id="myweather-title" onclick="weatherInfo()"></div>
        <div id="myweather-live"></div>
        <div id="myweather-forecast"></div>
    </div>

    <div id="mapReset" class="mapReset" title="设置地图中心点">
        <i class="glyphicon glyphicon-screenshot"></i>
    </div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="fullbg"></div>
    <div id="dialog-chart">
        <div class="dialog-title"><button type="button" class="btn btn-default btn-sm" onclick="closeChart()">关闭</button></div>
        <div id="chart-pie" class="chart-pie"><p>正在加载，请稍后...</p></div>
    </div>
    <div id="chart-btn" class="btn-group-vertical chart-btn">
        <button type="button" class="btn btn-primary btn-sm chart-bg" onclick="getDeviceChart()">设备</button>
        <button type="button" class="btn btn-primary btn-sm chart-bg" onclick="getAlarmChart()">报警</button>
    </div>

    <div style="position: absolute;left: 55px;bottom: 45px;z-index: 1;cursor: pointer;background:#ffff00" onclick="addAlarm()">
        <button>报警测试</button>
    </div>
    <audio id="bj_alarm" loop hidden='true'>
        <source src="/assets/map/media/bj_alarm.mp3" type="audio/mpeg" />
        <embed  src="/assets/map/media/bj_alarm.mp3" />
        <span>您的浏览器不支持该音频格式。</span>
    </audio>

    <audio id="alarm-media" controls style="margin-left:20px">
        <span>Your browser does not support this audio format.</span>
    </audio>'

</div>

<script src="http://webapi.amap.com/maps?v=1.3&key=b47a8a32ba9322448a427cf1f02a59f1&plugin=AMap.MouseTool"></script> <!-- 您申请的key值,plugin=AMap.MouseTool使用右击菜单需要 -->
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>   <!-- UI组件库 1.0 -->
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

<script type="text/javascript" src="/assets/map/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/map/css/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/map/js/layer/layer.js"></script>
<script type="text/javascript" src="/assets/map/js/echarts.min.js"></script>

<script type="text/javascript" src="/assets/map/mock/mockdata.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/initmap.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/addOverlay.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/searchtip.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/infowindow.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/managewindow.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/addAlarm.js"></script>
<script type="text/javascript" src="/assets/map/mapjs/mapEcharts.js"></script>
<!-- 使用该跑马灯特效之前要先引入marquee.css，jQuery和marquee.js文件。 -->
<script src="/assets/map/js/marquee.js"></script>
<script type="text/javascript">
    $(function (){
        createMarquee();        //初始化跑马灯插件
    });
</script>
<script>
    var centerLng  = initmap_mock.centerLng;
    var centerLat  = initmap_mock.centerLat;
    var centerZoom = initmap_mock.centerZoom;

    var mapResetId = "mapReset";
    var map = initmap(centerLng,centerLat,centerZoom);
    mapResetListener(mapResetId);                              //div id="mapReset"，设置地图中心点
    weatherService();                                           //天气信息，address：市、区,id="tip"
    addMapControls();                                           //添加常用控件或服务


    addOverlay();                   //点标记

</script>

</body>
</html>